<template>
  <div>
    <Modal v-model="groupPop" width="35" :closable="false" :mask-closable="false" class-name="vertical-center-modal">
      <div slot="header" class="head-sty">
        <div class="title">{{ $t('goods.group_play_text45') }}</div>
        <Icon type="md-close" class="close" @click="closeMet()" />
      </div>
      <div class="content-sty">
        <div class="sub-tit" v-html="$t('goods.group_play_text48')"></div>
        <div class="text-sty">{{ $t('goods.group_play_text22') }}:</div>
        <div class="gray-sty">
          <share-list :data="shareSuccessArr" heightVal="132px"></share-list>
        </div>
        <div class="tip-text">{{ $t('goods.group_play_text30') }}</div>
      </div>
      <div slot="footer" class="footer-wrap">
        <div class="cancel-text" @click="downLoadMet()">{{ $t('goods.group_play_text75') }}</div>
        <div class="confirm-text" @click="confirmBtn()">{{ $t('user.copyLink') }}</div>
      </div>
    </Modal>
    <group-poster-activity ref="posterShareRef"></group-poster-activity>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { bigTimes } from "@/common/digital-computation";
import shareList from '../../pay/compontents/share-list.vue';
import GroupPosterActivity from './group-poster-activity.vue';

export default {
  components: { shareList, GroupPosterActivity },
  data() {
    return {
      groupPop: false,
      shareSuccessArr: [
        { icon: require('@/assets/images/pay/img1.png'), name: 'TikTok', desc: this.$t('goods.group_play_text26') },
        { icon: require('@/assets/images/pay/img2.png'), name: 'Discord', desc: this.$t('goods.group_play_text29') },
        { icon: require('@/assets/images/pay/img3.png'), name: 'Reddit', desc: this.$t('goods.group_play_text27') },
        { icon: require('@/assets/images/pay/youTube.png'), name: 'YouTube', desc: this.$t('goods.openBookingYouTube') },
        { icon: require('@/assets/images/pay/img4.png'), name: 'Instagram', desc: this.$t('goods.group_play_text24') },
      ],
      info: {}
    }
  },
  computed: {
    ...mapState({
      userCurrency: state => state.user.userCurrency,
    })
  },
  methods: {
    open(info) {
      this.info = info;
      this.groupPop = true;
    },
    closeMet() {
      this.groupPop = false;
    },
    downLoadMet() {
      // 点击“复制邀请链接”或“下载邀请海报”打点
      if (this.$analytics) {
        this.$analytics.logEvent('pt_1010');
      }
      this.groupPop = false;
      let data = {
        ...this.info.orderGroupVo,
        channel: this.info.channel,
        spuNo: this.info.spuNo
      }
      this.$refs.posterShareRef.open(data)
    },
    confirmBtn() {
      // 点击“复制邀请链接”或“下载邀请海报”打点
      if (this.$analytics) {
        this.$analytics.logEvent('pt_1010');
      }

      // const url = `https://discord.com/invite/tyqE6KBvD4 ,I just secured my favorite items at  ${bigTimes(Number(this.info.orderGroupVo.discount), 100)}% OFF on 100buy and saved $${this.info.orderGroupVo.discountAmount} ! 😍 Want in?`;
      const url = `https://discord.com/invite/H5fEeBCY3y ,I just secured my favorite items at  ${bigTimes(Number(this.info.orderGroupVo.discount), 100)}% OFF on 100buy and saved $${this.info.orderGroupVo.discountAmount} ! 😍 Want in?`;
      this.onCopy(url);
      this.groupPop = false;
    },
    onCopy(info) {
      // 复制
      let _this = this;
      this.$copyText(info).then(function () {
        _this.$Message.success(_this.$t('goods.group_play_text47'));
      }, function () {
        _this.$Message.error(_this.$t('public.copyFail'));
      })
    },
  }
}
</script>

<style lang="less" scoped>
:deep(.ivu-modal-content) {
  border-radius: 12px;

  .ivu-modal-header {
    border: none;
    padding: 32px 32px;
  }

  .ivu-modal-body {
    padding: 0 32px;
  }

  .ivu-modal-footer {
    border: none;
    padding: 32px;
  }
}

.vertical-center-modal {
  display: flex;
  align-items: center;
  justify-content: center;

  .head-sty {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title {
      font-family: PingFang SC, PingFang SC;
      font-weight: 600;
      font-size: 24px;
      color: #1E1714;
      line-height: 28px;
    }

    .close {
      color: #1E1714;
      font-size: 36px;
      font-weight: 500;
      cursor: pointer;
    }
  }

  .content-sty {
    .sub-tit {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 18px;
      color: #1E1714;
      line-height: 21px;

      :deep(span) {
        color: #FF186B;
      }
    }

    .text-sty {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 18px;
      color: #767B93;
      line-height: 21px;
      margin-top: 16px;
    }

    .gray-sty {
      width: 100%;
      height: 100%;
      padding: 16px 4px 16px 16px;
      background: #F5F6FA;
      border-radius: 12px 12px 12px 12px;
      border: 1px solid #E9EAF3;
      margin-top: 12px;
    }

    .tip-text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 16px;
      color: #AEB0B9;
      line-height: 20px;
      margin-top: 16px;
    }
  }

  .footer-wrap {
    display: flex;
    justify-content: end;
    gap: 24px;

    .cancel-text {
      height: 46px;
      padding: 12px 30px;
      border-radius: 8px 8px 8px 8px;
      border: 1px solid #FF186B;
      font-family: Open Sans, Open Sans;
      font-weight: 400;
      font-size: 16px;
      color: #FF186B;
      line-height: 19px;
      cursor: pointer;
    }

    .confirm-text {
      height: 46px;
      padding: 12px 30px;
      background: #F21473;
      border-radius: 8px 8px 8px 8px;
      font-family: Open Sans, Open Sans;
      font-weight: 400;
      font-size: 16px;
      color: #FFFFFF;
      line-height: 19px;
      cursor: pointer;
    }
  }
}
</style>
